<template>
  <div>
    <van-tabs v-model="active" color="#00be88" title-active-color="#00be88">
      <van-tab title="预定">
        <template>
          <div class="t_box">
            <div class="t_box_first">
              <p>单票</p>
            </div>
            <div class="t_box_last" v-for="item in 10" :key="item.id">
              <div class="box_first">
                <p>单人营地入场券（自带装备）</p>
                <div class="box_commit">
                  <van-icon name="passed" color="#00be88" size="18px" />
                  <p>在线支付</p>
                </div>
                <span>预定须知> </span>
              </div>
              <div class="box_list">
                <p>￥45</p>
                <button>预定</button>
              </div>
            </div>
          </div>
        </template>
      </van-tab>
      <van-tab title="介绍">
        <template>
          <div class="b_box">
            <div class="b_box_first">
              <span>经理推荐</span>
              <p>逃离城市喧嚣，走进乡村自然，在春野秋梦的营地里感受大自然</p>
              <br />
              <br />
              <p>营业时间：12:00-19:00；</p>
              <br />
              <p>营地地址：金山区廊下镇漕廊公路9133号（廊下生态园内）</p>
            </div>
          </div>
          <div class="next">
            <div class="next_div">
              <span>经理推荐</span>
              <p>金山生态园</p>
            </div>
          </div>
          <div class="navimg">
            <span>产品介绍</span>
            <div class="naving_first">
              <img
                src="../../assets/img/8c19fad7-3a19-4bd8-8c33-c6d6877297b9_202207261333.jpg"
                alt=""
              />
              <img
                src="../../assets/img/db2fcac4-a395-47b2-b322-5a7d29e6cedf_202301101054.jpg"
                alt=""
              />
              <img
                src="../../assets/img/719c1d56-ad5a-42e1-8141-d92f84749b63_202302241130.jpg"
                alt=""
              />
              <img
                src="../../assets/img/74ec374c-b4d9-4fa9-9055-08e67a825f71_202211031456.jpg"
                alt=""
              />
            </div>
          </div>
          <div class="noting">
            <span>交通信息</span>
            <p>建议自驾前往，参考时间约1.5个小时，具体以当日路况为准！</p>
          </div>
        </template>
      </van-tab>
      <van-tab title="须知">
        <div class="empty">
          <span>预定须知</span>
          <div class="empty_div">
            <p>入营须知</p>
            <br />
            <p>亲爱的大朋友、小朋友，为了您更好的露营体验，请您悉知:</p>
            <br />
            <p>
              TIPS1：请您注意安全警示，遵守秩序，遵守营地水、火、电使用要求;请勿攀爬、翻越安全护栏，请勿靠近池塘水沟，防止跌落；
            </p>
            <p>TIPS2：请勿拥挤打闹，上下台阶时，要小心谨慎；</p>
            <p>TIPS3：户外营地，请您注意做好防晒防蚊虫保护；</p>
            <p>TIPS4：春日时节，早晚温差大，建议您带好防风保暖外套；</p>
          </div>
        </div>
        <div class="t_title">
          <span>预订限制</span>
          <p>下单所选日期即为使用时期，请确认好行程再下单；</p>
        </div>
        <div class="t_detail">
          <span>安全提示</span>
          <p>
            敬请关注出行提示，重视出游安全。密切关注旅游、外交等有关部门发布的出行提示，了解目的地天气、卫生、交通和社会治安情况，提前评估旅行风险，谨慎或暂勿前往恐怖袭击频发、政局动荡不稳或发生重大疫情、自然灾害的国家和地区。
          </p>
        </div>
        <div class="writing">
          <p>- 热门产品 -</p>
        </div>
      </van-tab>
      <van-tab title="评价">
        <template>
          <div class="comment">
            <span>用户点评</span>
            <div class="comment_div">
              <img src="../../assets/img/write.png" alt="" />
              <p>期待您出游后留下宝贵的点评</p>
            </div>
          </div>
          <div class="writing">
            <p>- 热门产品 -</p>
          </div>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
    };
  },
};
</script>

<style lang="scss" scoped>
.t_box {
  padding: 15px;
  background-color: #fff;
  border-bottom: 0.5px solid #f4f5f5;
  .t_box_first {
    width: 100%;
    height: 26px;
    border-bottom: 0.5px solid #f4f5f5;
    border-left: 2px solid #00be88;
    p {
      font-size: 16px;
      font-weight: bold;
      display: block;
      line-height: 26px;
      margin-left: 10px;
    }
  }
  .t_box_last {
    width: 100%;
    height: 90px;
    padding: 15px 0;
    display: flex;
    border-bottom: 0.5px solid #f4f5f5;
    .box_first {
      width: 298px;
      height: 70px;
      p:nth-child(1) {
        font-size: 14px;
        color: #333333;
        margin-bottom: 5px;
      }
      .box_commit {
        display: flex;
        p:nth-child(2) {
          font-size: 12px;
          color: #00be88;
          margin-left: 5px;
          margin-bottom: 4px;
        }
      }
      span {
        font-size: 14px;
        color: #aaaaaa;
      }
    }
    .box_list {
      width: 50px;
      height: 70px;
      margin-top: 3px;
      p {
        font-size: 18px;
        color: #ff6666;
      }
      button {
        width: 50px;
        height: 28px;
        background-color: #ff6666;
        font-size: 5px;
        color: #fff;
        border-radius: 3px;
        margin-top: 3px;
      }
    }
  }
}
.b_box {
  padding: 15px;
  background-color: #fff;
  border-bottom: 0.5px solid #f4f5f5;
  margin-bottom: 10px;
  .b_box_first {
    width: 100%;
    background-color: #fff;
    span {
      height: 26px;
      font-size: 16px;
      font-weight: bold;
      display: block;
      line-height: 26px;
      margin-bottom: 10px;
      border-left: 2px solid #00be88;
      border-bottom: 0.5px solid #f4f5f5;
      padding-left: 10px;
    }
    p {
      font-size: 13px;
      color: #666666;
    }
  }
}
.next {
  width: 100%;
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
  .next_div {
    span {
      height: 26px;
      font-size: 16px;
      font-weight: bold;
      display: block;
      line-height: 26px;
      margin-bottom: 10px;
      border-left: 2px solid #00be88;
      padding-left: 10px;
    }
    p {
      font-size: 13px;
      color: #666666;
    }
  }
}
.navimg {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
  span {
    height: 26px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 26px;
    margin-bottom: 10px;
    border-left: 2px solid #00be88;
    padding-left: 10px;
  }
  .naving_first {
    img:nth-child(1) {
      width: 347px;
      height: 78px;
    }
    img:nth-child(2) {
      width: 347px;
      height: 525px;
    }
    img:nth-child(3) {
      width: 347px;
      height: 217px;
    }
    img:nth-child(4) {
      width: 347px;
      height: 511px;
    }
  }
}
.noting {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 20px;
  span {
    height: 26px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 26px;
    margin-bottom: 10px;
    border-left: 2px solid #00be88;
    padding-left: 10px;
  }
  p {
    font-size: 14px;
  }
}
.empty {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
  span {
    height: 26px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 26px;
    margin-bottom: 10px;
    border-left: 2px solid #00be88;
    padding-left: 10px;
  }
  .empty_div {
    p {
      font-size: 13px;
      color: #666666;
    }
  }
}
.t_title {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
  span {
    height: 26px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 26px;
    margin-bottom: 10px;
    border-left: 2px solid #00be88;
    padding-left: 10px;
  }
  p {
    font-size: 13px;
    color: #666666;
  }
}
.t_detail {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
  span {
    height: 26px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 26px;
    margin-bottom: 10px;
    border-left: 2px solid #00be88;
    padding-left: 10px;
  }
  p {
    font-size: 13px;
    color: #666666;
  }
}

.comment {
  padding: 15px;
  background-color: #fff;
  span {
    height: 26px;
    font-size: 16px;
    font-weight: bold;
    display: block;
    line-height: 26px;
    margin-bottom: 10px;
    border-left: 2px solid #00be88;
    padding-left: 10px;
  }
  .comment_div {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    img {
      width: 79px;
      height: 79px;
      display: block;
    }
    p {
      font-size: 16px;
      color: #9c9c9c;
      line-height: 80px;
      margin-left: 10px;
    }
  }
}
.writing {
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
  p {
    font-size: 14px;
    text-align: center;
    line-height: 50px;
  }
}
</style>
